/* Centering technique from http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css */
.alfresco-notifications-AlfNotification {
   height: 0;
   left: 0;
   position: fixed;
   right: 0;
   top: 0;
   z-index: 9999; /* This isn't ideal, but searching all z-indexes is even worse (better solution possible?) */
   &__container {
      background: @notification-background;
      border-radius: @notification-border-radius;
      box-shadow: @standard-box-shadow;
      box-sizing: border-box;
      margin: 0 auto;
      opacity: 0;
      padding: 20px 30px 20px 20px;
      position: relative;
      top: 22.5vh;
      transition: all .2s ease-out;
      width: @notification-width;
   }
   &__close {
      color: @notification-foreground;
      cursor: pointer;
      font-size: 25px;
      position: absolute;
      right: 10px;
      top: 0;
      transition: all .1s ease-out;
   }
   &__message {
      color: @notification-foreground;
      font-family: @standard-font;
      font-size: @normal-font-size;
      line-height: ceil(@normal-font-size/@standard-line-height) * @standard-line-height;
   }
   &__widgets {
      display: none;
      margin-top: 20px;
   }
   &--visible {
      .alfresco-notifications-AlfNotification {
         &__container {
            opacity: 1;
            top: 20vh;
         }
      }
   }
   &--has-inline-button {
      .alfresco-notifications-AlfNotification {
         &__container {
            padding: 20px;
            line-height: ceil(@normal-font-size/@standard-line-height) * @standard-line-height;
         }
         &__close {
            position: static;
            right: 0;
            float: right;
         }
         &__widgets {
            display: block;
            float: right;
            margin: 0;
            margin-right: @normal-font-size;
            .alfresco-navigation-Link {
               color: @notification-foreground;
               text-decoration: underline;
            }
         }
      }
   }
   &--auto-close {
      .alfresco-notifications-AlfNotification {
         &__close {
            color: @notification-foreground-dimmed;
            &:hover {
               color: @notification-foreground;
            }
         }
      }
   }
   &--has-widgets {
      .alfresco-notifications-AlfNotification {
         &__widgets {
            display: block;
         }
      }
   }
}
